<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性盒属性flex-direction</title>
		<style>
			.box{
				min-height: 160px;
				display: flex;/*指定弹性盒的容器*/
				/*
				row（默认值）：主轴为水平方向，起点在左端。
				row-reverse：主轴为水平方向，起点在右端。
				column：主轴为垂直方向，起点在上沿。
				column-reverse：主轴为垂直方向，起点在下沿。
				*/
				flex-direction: column;
				justify-content: center;/*设置弹性盒子元素向行中间位置对齐*/
				align-items: center;/*弹性盒子元素向垂直于轴的方向上的中间位置对齐*/
			}
			.box div{
				background-color: white;
				border: 0px solid gray;
			}
			.box div.A{
				height: 300px;
				width: 300px;
				background-color: red;
			}
			.box div.B{
				height: 300px;
				width: 300px;
				background-color: yellow;
			}
			.box div.C{
				height: 300px;
				width: 300px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="A">A</div>
			<div class="B">B</div>
			<div class="C">C</div>
		</div>
	</body>
</html>
